<!DOCTYPE>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<title>任务十一：移动Web页面布局实践</title>
	<link rel="stylesheet" href="css/index.css" />
</head>
<body>
	<header class="header">
		<a href="#"><返回</a>
		<h2>web全栈学习</h2>
	</header>
	<nav >
		<ul class="nav">
			<li><a href="#">导航</a></li>
			<li><a href="#" class="active">导航</a></li>
			<li><a href="#">导航</a></li>
			<li><a href="#">导航</a></li>
			<li><a href="#">导航</a></li>
		</ul>
	</nav>
	<div class="banner">
		<img src="image/banner.jpg"/>
	</div>
	<div class="bq">
		<ul>
			<li>
				<img src="image/bq.jpg"/>
				<p>标签</p>
			</li>
			<li>
				<img src="image/bq.jpg"/>
				<p>标签</p>
			</li>
			<li>
				<img src="image/bq.jpg"/>
				<p>标签</p>
			</li>
			<li>
				<img src="image/bq.jpg"/>
				<p>标签</p>
			</li>
			<li>
				<img src="image/bq.jpg"/>
				<p>标签</p>
			</li>
		</ul>
	</div>
	<div class="flan">
		<ul class="u-fla">
			<li>
				<img src="image/li01.jpg"/>
				<h1>分栏一</h1>
				<h2>分栏小标题</h2>
			</li>
			<li>
				<img <img src="image/li02.jpg"/>
				<h1>分栏一</h1>
				<h2>分栏小标题</h2>
			</li>
			<li>
				<img <img src="image/li03.jpg"/>
				<h1>分栏一</h1>
				<h2>分栏小标题</h2>
			</li>
		</ul>
	</div>
	<div class="item">
		<h2>模块一</h2>
		<figure>
			<aside>
				<img src="image/f01.jpg" />
			</aside>
			<figcaption>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
			</figcaption>
		</figure>
	</div>
	<div class="item">
		<h2>模块二</h2>
		<figure>
			<aside>
				<img src="image/f01.jpg" />
			</aside>
			<figcaption>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
				<a><span>这是文案</span></a>
			</figcaption>
		</figure>
	</div>
	<div class="item02">
		<figure>
			<img src="image/item02.jpg" />
			<figcaption>
				<p>这是文章标题字号是22的文章标题</p>
				<span>文章来源 6分钟前</span>
			</figcaption>
		</figure>
		<div class="h22"></div>
		<figure>
			<img src="image/item02.jpg" />
			<figcaption>
				<p>这是另一个文章标题</p>
				<span>文章来源 6分钟前</span>
			</figcaption>
		</figure>
		<div class="h22"></div>
	</div>
	<div class="item03">
		<p>这是文章标题字号是22的文章标题</p>
		<ul>
			<li><img src="image/item03.jpg" /></li>
			<li><img src="image/item03.jpg" /></li>
			<li><img src="image/item03.jpg" /></li>
		</ul>
		<span>文章来源 6分钟前</span>
	</div>
	<footer>
		版权所有 © 曲振飞
	</footer>
</body>
</html>